<template>
	<view class="big">
		<view class="title">
			<view class="one">
				操作
			</view>
			<view class="two">
				时间
			</view>
			<view class="three">
				物品
			</view>
			<view class="four">
				支出/收入
			</view>
			<view class="five">
				交易状态
			</view>
		</view>

		<view class="title" v-for="item in jsonDate" :key="item.id">
			<view class="one">
				{{item.buyer==userId?"买入":"卖出"}}
			</view>
			<view class="two">
				 {{ formatDate(item.publishDate) }}
			</view>
			<view class="three">
				{{item.goodName}}
			</view>
			<view class="four">
				{{item.buyer==userId?"-":"+"}}
				{{item.price}}
			</view>
			<view class="five">
				已完成
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myTransaction
	} from '@/api/system/goods.js'


	export default {
		onLoad: function() {
			this.getMyTransaction()
		},
		data() {
			return {
				jsonDate: [],
				userId: this.$store.state.user.id
			}
		},
		methods: {
			getMyTransaction() {
				myTransaction(this.userId).then(res => {
					this.jsonDate = res
					console.log(res)
				})
			},
			formatDate(dateString) {
				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.big {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
	}

	.title {
		width: 100%;
		min-height: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		word-wrap: break-word;
		box-sizing: border-box;
		border-bottom: 1px gray solid;
	}

	.one {
		width: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		box-sizing: border-box;
	}

	.two {
		width: 30%;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		box-sizing: border-box;
	}

	.three {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		box-sizing: border-box;
	}

	.four {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		box-sizing: border-box;
	}

	.five {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		box-sizing: border-box;
	}
</style>